<template>
  <div>
    <el-form style="margin: 10px 0" :model="queryForm" inline>
      <el-form-item>
        <el-button class="mll-5" type="danger" @click="deleteSelected"
          :disabled="!this.selectedIds.length">批量删除</el-button>
      </el-form-item>
    </el-form>

    <el-card class="box-card">
      <el-table :data="logLoginList" script style="width:100%" @selection-change="handelSelectionChange"
        :row-key="row => row.id">
        <el-table-column type="selection" align="center"></el-table-column>
        <el-table-column prop="id" label="接口日志id" align="center" />
        <el-table-column prop="userId" label="用户id" align="center" />
        <el-table-column prop="ip" label="用户ip" align="center" />
        <el-table-column prop="requestPath" label="请求地址" align="center" />
        <el-table-column prop="module" label="业务模块" align="center" />
        <el-table-column prop="requestType" label="请求类型" align="center" />
        <el-table-column prop="methodName" label="方法名称" align="center" />

        <el-table-column prop="params" label="请求参数" align="center">
          <template slot-scope="scope">
            {{ scope.row.params.length > 50 ? scope.row.params.slice(0, 50) + '...' : scope.row.params }}
          </template>
        </el-table-column>

        <el-table-column prop="result" label="返回结果" align="center">
          <template slot-scope="scope">
            {{ scope.row.result.length > 50 ? scope.row.result.slice(0, 50) + '...' : scope.row.result }}
          </template>
        </el-table-column>

        <el-table-column prop="operationTime" label="操作时间" align="center">
          <template slot-scope="scope">
            {{ scope.row.operationTime | formatDate }}
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <div style="display:flex;gap: 1px;justify-content: center;">
              <el-button type="danger" style="padding: 5px 5px; font-size: 12px;"
                @click="deleteLogLogin([scope.row.id])">删除</el-button>
              <el-button type="primary" style="padding: 5px 5px; font-size: 12px;"
                @click="fetchLogLoginDetail(scope.row.id)">详情</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <span class="demonstration" />
        <div style="padding: 10px 0; text-align: center">
          <el-pagination @current-change="handelPageChange" :current-page="queryForm.pageNo"
            :page-size="queryForm.pageSize" :total="total" :page-count="pages" layout="total,prev,pager,next,jumper">
          </el-pagination>
        </div>
      </div>

    </el-card>

    <el-dialog :title="detailTitle" :visible.sync="dialogVisible" width="50%">
      <div style="word-break:break-all;">
        {{ detailContent }}
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>

  </div>
</template>
    
<script>
import { getLogLoginPage, deleteLogLoginByIds, queryLogLoginById } from '@/api/logLogin';
import dayjs from 'dayjs';
export default {
  data() {
    return {
      queryForm: {
        pageNo: 1,
        pageSize: 5,
        requestType: '',
      },
      logLoginList: [],
      total: 0,
      pages: 0,
      selectedIds: [],
      dialogVisible: false,
      detailContent: '',
      detailTitle: "日志详情"

    };
  },
  methods: {
    async fetchLogLogin() {
      try {
        const response = await getLogLoginPage(this.queryForm);
        this.logLoginList = response.data.list;
        this.total = Number(response.data.total);
        this.pages = Number(response.data.pages)
        console.info("list:", this.logLoginList)
        console.info("total:", this.total)
        console.info("pages:", this.pages)
      } catch (error) {
        console.error("查询失败", error);
      }
    },
    async fetchLogLoginDetail(id) {
      try {
        const response = await queryLogLoginById(id);
        this.detailContent = JSON.stringify(response.data, null, 2)
        this.dialogVisible = true;
      } catch (error) {
        this.$message.error("获取详情失败" + (error.message || "未知错误"))
      }
    },
    handelPageChange(page) {
      this.queryForm.pageNo = page;
      this.fetchLogLogin();
    },
    reset() {
      this.queryForm.requestType = '';
      this.fetchLogLogin();
    },
    async deleteLogLogin(ids) {
      try {
        await deleteLogLoginByIds(ids);
        this.$message.success("删除成功");
        if (this.logLoginList.length <= ids.length && this.queryForm.pageNo > 1) {
          this.queryForm.pageNo -= 1;
        }
        this.fetchLogLogin();
      } catch (error) {
        this.$message.error("删除失败" + (error.message || "未知错误"))
      }
    },
    async deleteSelected() {
      if (this.selectedIds.length === 0) {
        this.$message.warning("请至少选择一条记录");
        return;
      }
      this.deleteLogLogin(this.selectedIds);
    },
    handelSelectionChange(selected) {
      this.selectedIds = selected.map(item => item.id);
    },
  },
  mounted() {
    this.fetchLogLogin();
  },
  filters: {
    formatDate(value) {
      return value ? dayjs(value).format('YYYY-MM-DD HH:mm:ss') : '';
    }
  }
}

</script>
    
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.mll-5 {
  margin-left: 10px;
}</style>